import type { FC } from "react";
import { useUpdateEffect } from "ahooks";
import classNames from "classnames";
import { produce } from "immer";
import { useRef } from 'react';

import styles from './index.module.scss'
import { batchUpdateCustomization } from "./layout";
import { useCustomizationStore, usePersonalDetailsStore } from "@/store/createStore";

interface IndexProps {

}

const Index: FC<IndexProps> = () => {
  const { customization, updateLayout, updateSectionOrder, addCustomization } = useCustomizationStore(state => state, (o, n) => {
    return o.customization.layout.colsFromDetails === n.customization.layout.colsFromDetails && o.customization.layout.detailsPosition === n.customization.layout.detailsPosition && o.customization.sectionOrder === n.customization.sectionOrder
  })
  const clickstack = useRef(new Set([customization.layout.detailsPosition]))

  const { personalDetails } = usePersonalDetailsStore(state => state, (o, n) => {
    return o.personalDetails.id === n.personalDetails.id
  })
  useUpdateEffect(() => {
    clickstack.current.clear()
  }, [customization.template])
  function change(data) {
    updateLayout(data.layout)
    updateSectionOrder(data.sectionOrder)
  }
  return (
    <>
      <div style={{ marginBottom: '30px' }}>

        <div className={styles.headPosition}>
          <div
            style={{ textAlign: 'center' }}
            onClick={async () => {
              if (customization.layout.detailsPosition === 'top') {
                return
              }
              change(produce(customization, (draft) => {
                draft.layout.detailsPosition = 'top'
                draft.layout.colsFromDetails[draft.layout.detailsPosition] = 'one'
              }))
              if (customization.id) {
                batchUpdateCustomization({
                  updates: [
                    {
                      path: 'layout.detailsPosition',
                      value: 'top',
                    },
                    {
                      path: 'layout.colsFromDetails.top',
                      value: 'one',
                    },
                  ],
                  id: customization.id,
                })
              }
              else if (personalDetails.id) {
                addCustomization(personalDetails.id)
              }
            }}
          >
            <div
              className={classNames(
                styles.layoutTypes,
                styles.top,
                customization.layout.detailsPosition === 'top' ? styles.active : '',
              )}
            ></div>
            <div>居上</div>
          </div>
          <div
            style={{ textAlign: 'center' }}
            onClick={async () => {
              if (customization.layout.detailsPosition === 'left') {
                return
              }
              clickstack.current.add('left')

              const data = produce(customization, (draft) => {
                if (clickstack.current.has('right')) {
                  clickstack.current.delete('right')
                  const leftSectionChildren = draft.sectionOrder.two.leftSectionChildren
                  draft.sectionOrder.two.leftSectionChildren = draft.sectionOrder.two.rightSectionChildren
                  draft.sectionOrder.two.rightSectionChildren = leftSectionChildren
                }
                draft.layout.detailsPosition = 'left'
                draft.layout.colsFromDetails[draft.layout.detailsPosition] = 'two'
              })
              change(data)
              if (customization.id) {
                batchUpdateCustomization({
                  updates: [
                    {
                      path: 'layout.detailsPosition',
                      value: 'left',
                    },
                    {
                      path: 'layout.colsFromDetails.left',
                      value: 'two',
                    },
                    {
                      path: 'sectionOrder.two.leftSectionChildren',
                      value: data.sectionOrder.two.leftSectionChildren,
                    },
                    {
                      path: 'sectionOrder.two.rightSectionChildren',
                      value: data.sectionOrder.two.rightSectionChildren,
                    },
                  ],
                  id: customization.id,
                })
              }
              else if (personalDetails.id) {
                addCustomization(personalDetails.id)
              }
            }}
          >
            <div
              className={classNames(
                styles.layoutTypes,
                styles.left,
                customization.layout.detailsPosition === 'left' ? styles.active : '',
              )}
            ></div>
            <div>居左</div>
          </div>
          <div
            style={{ textAlign: 'center' }}
            onClick={async () => {
              if (customization.layout.detailsPosition === 'right') {
                return
              }
              clickstack.current.add('right')

              const data = produce(customization, (draft) => {
                if (clickstack.current.has('left')) {
                  clickstack.current.delete('left')
                  const leftSectionChildren = draft.sectionOrder.two.leftSectionChildren
                  draft.sectionOrder.two.leftSectionChildren = draft.sectionOrder.two.rightSectionChildren
                  draft.sectionOrder.two.rightSectionChildren = leftSectionChildren
                }
                draft.layout.detailsPosition = 'right'
                draft.layout.colsFromDetails[draft.layout.detailsPosition] = 'two'
              })
              change(data)
              if (customization.id) {
                batchUpdateCustomization({
                  updates: [
                    {
                      path: 'layout.detailsPosition',
                      value: 'right',
                    },
                    {
                      path: 'layout.colsFromDetails.right',
                      value: 'two',
                    },
                    {
                      path: 'sectionOrder.two.leftSectionChildren',
                      value: data.sectionOrder.two.leftSectionChildren,
                    },
                    {
                      path: 'sectionOrder.two.rightSectionChildren',
                      value: data.sectionOrder.two.rightSectionChildren,
                    },
                  ],
                  id: customization.id,
                })
              }
              else if (personalDetails.id) {
                addCustomization(personalDetails.id)
              }
            }}
          >
            <div
              className={classNames(
                styles.layoutTypes,
                styles.right,
                customization.layout.detailsPosition === 'right' ? styles.active : '',
              )}
            ></div>
            <div>居右</div>
          </div>
        </div>
      </div>
      {
        customization.layout.detailsPosition === 'top'
          ? <div style={{ marginBottom: '20px' }}>
            <div className={styles.columns}>
              <div className={classNames(customization?.layout?.colsFromDetails?.[customization.layout.detailsPosition] === 'one' ? styles.active : '', styles.columnItem)} onClick={async () => {
                if (customization?.layout?.colsFromDetails?.[customization.layout.detailsPosition] === 'one')
                  return
                change(produce(customization, (draft) => {
                  draft.layout.colsFromDetails[draft.layout.detailsPosition] = 'one'
                }))
                if (customization.id) {
                  batchUpdateCustomization({
                    updates: [
                      {
                        path: `layout.colsFromDetails.${customization?.layout.detailsPosition}`,
                        value: 'one',
                      },
                    ],
                    id: customization.id,
                  })
                }
                else if (personalDetails.id) {
                  addCustomization(personalDetails.id)
                }
              }}>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 47 24" className="xssm:w-12 w-10"><rect width="44.971" height="4.878" x="1.011" y="0.523" fill="currentColor" stroke="currentColor" rx="1.5"></rect><rect width="44.971" height="4.878" x="1.011" y="9.339" fill="currentColor" stroke="currentColor" rx="1.5"></rect><rect width="44.971" height="4.878" x="1.011" y="18.155" fill="currentColor" stroke="currentColor" rx="1.5"></rect></svg>
              </div>
              <div className={classNames(customization?.layout?.colsFromDetails?.[customization.layout.detailsPosition] === 'two' ? styles.active : '', styles.columnItem)} onClick={async () => {
                if (customization?.layout?.colsFromDetails?.[customization.layout.detailsPosition] === 'two')
                  return
                change(produce(customization, (draft) => {
                  draft.layout.colsFromDetails[draft.layout.detailsPosition] = 'two'
                }))
                if (customization.id) {
                  batchUpdateCustomization({
                    updates: [
                      {
                        path: `layout.colsFromDetails.${customization?.layout.detailsPosition}`,
                        value: 'two',
                      },
                    ],
                    id: customization.id,
                  })
                }
                else if (personalDetails.id) {
                  addCustomization(personalDetails.id)
                }
              }}>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 47 24" className="xssm:w-12 w-10"><rect width="20.671" height="4.878" x="0.853" y="0.841" fill="currentColor" stroke="currentColor" rx="1.5"></rect><rect width="20.671" height="4.878" x="0.853" y="9.339" fill="currentColor" stroke="currentColor" rx="1.5"></rect><rect width="20.671" height="4.878" x="0.853" y="17.838" fill="currentColor" stroke="currentColor" rx="1.5"></rect><rect width="20.671" height="4.878" x="25.476" y="0.84" fill="currentColor" stroke="currentColor" rx="1.5"></rect><rect width="20.671" height="4.878" x="25.476" y="9.339" fill="currentColor" stroke="currentColor" rx="1.5"></rect><rect width="20.671" height="4.878" x="25.476" y="17.838" fill="currentColor" stroke="currentColor" rx="1.5"></rect></svg>
              </div>
            </div>
          </div>
          : null
      }

    </>

  );
}

export default Index;
